<!--
`nuxeo-test-search-results`
@group Nuxeo UI
@element nuxeo-test-search-results
-->
<!-- XXX Remove on ELEMENTS-1321 -->
<link rel="import" href="../nuxeo-results.html" />
<dom-module id="nuxeo-test-search-results">
  <template>
    <style include="nuxeo-styles"></style>

    <nuxeo-results
      id="results"
      nx-provider="[[nxProvider]]"
      selected-items="{{selectedItems}}"
      display-mode="list"
      sort-options="[[sortOptions]]"
      display-sort
      display-quick-filters
    >
      <nuxeo-data-grid
        name="grid"
        icon="nuxeo:view-thumbnails"
        empty-label="[[i18n('searchResults.noResults')]]"
        selection-enabled
      >
        <template>
          <nuxeo-document-grid-thumbnail
            tabindex$="{{tabIndex}}"
            selected$="{{selected}}"
            doc="[[item]]"
            index="[[index]]"
            on-navigate="_navigate"
            selected-items="[[selectedItems]]"
          >
          </nuxeo-document-grid-thumbnail>
        </template>
      </nuxeo-data-grid>

      <nuxeo-data-table
        name="table"
        icon="nuxeo:view-list"
        settings-enabled
        empty-label="[[i18n('searchResults.noResults')]]"
        selection-enabled
        on-row-clicked="_navigate"
      >
        <nuxeo-data-table-column
          name="[[i18n('label.dublincore.title')]]"
          field="dc:title"
          sort-by="dc:title"
          flex="100"
        >
          <template>
            <nuxeo-document-thumbnail document="[[item]]"></nuxeo-document-thumbnail>
            <a class="ellipsis" href$="[[urlFor(item)]]">[[item.title]]</a>
          </template>
        </nuxeo-data-table-column>

        <nuxeo-data-table-column name="[[i18n('label.type')]]" field="type" hidden>
          <template>
            <nuxeo-tag>[[formatDocType(item.type)]]</nuxeo-tag>
          </template>
        </nuxeo-data-table-column>
      </nuxeo-data-table>

      <nuxeo-data-list
        name="list"
        icon="nuxeo:view-headline"
        empty-label="[[emptyLabel]]"
        multi-selection
        empty-label-when-filtered="[[emptyLabelWhenFiltered]]"
        selection-enabled
      >
        <template>
          <nuxeo-document-list-item
            selected$="{{selected}}"
            doc="[[item]]"
            index="[[index]]"
            on-navigate="_navigate"
            selected-items="[[selectedItems]]"
          >
          </nuxeo-document-list-item>
        </template>
      </nuxeo-data-list>
    </nuxeo-results>
  </template>

  <script>
    Polymer({
      is: 'nuxeo-test-search-results',
      behaviors: [Nuxeo.LayoutBehavior],
      properties: {
        nxProvider: Object,

        sortOptions: {
          type: Array,
          value: [],
        },
      },

      ready() {
        // stub the nuxeo-results methods
        const { results } = this.$;
        results.fetch = () => {
          // simulates a real fetch by populating the view.items path with an array of simplified results
          results.view = {
            items: [{ uid: 'uid1' }, { uid: 'uid2' }],
          };
        };
        results.reset = () => {
          // simulates a real reset by clearing the view.items path with an empty array
          results.view = {
            items: [],
          };
        };
      },

      attached() {
        this.sortOptions = [
          { field: 'dc:title', label: this.i18n('searchResults.sort.field.title'), order: 'asc' },
          { field: 'dc:created', label: this.i18n('searchResults.sort.field.created'), order: 'asc', selected: true },
          { field: 'dc:modified', label: this.i18n('searchResults.sort.field.modified'), order: 'desc' },
          { field: 'dc:lastContributor', label: this.i18n('searchResults.sort.field.lastContributor'), order: 'asc' },
          { field: 'state', label: this.i18n('searchResults.sort.field.state'), order: 'asc' },
          { field: 'dc:nature', label: this.i18n('searchResults.sort.field.nature'), order: 'asc' },
          { field: 'dc:coverage', label: this.i18n('searchResults.sort.field.coverage'), order: 'asc' },
        ];
      },

      _navigate(e) {
        this.fire('navigate', { doc: (e.model || e.detail).item, index: (e.model || e.detail).index });
      },
    });
  </script>
</dom-module>
